<!-- #section:basics/content.breadcrumbs -->
<link rel="stylesheet" type="text/css"
      href="$request.contextPath/res/framework/datetimepicker/jquery.datetimepicker.css"/>

<div class="breadcrumbs" id="breadcrumbs">
    <script type="text/javascript">
        try {
            ace.settings.check('breadcrumbs', 'fixed')
        } catch (e) {
        }
    </script>

    <ul class="breadcrumb">
        <li>
            <i class="ace-icon fa fa-home home-icon"></i>
            <a href="#">Banner管理</a>
        </li>
        <li class="active">广告列表</li>
    </ul>

</div>

<!-- /section:basics/content.breadcrumbs -->
<div class="page-content">
    <form method="post" name="queryForm" action="./banner/getBanner" id="queryForm">
        <div class="page-header">
            <div class="row" style="vertical-align: middle">
                <div class="col-xs-4" id="nav-search">
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="input-group">
                                <input type="text" name="queryString" id="queryString" value="$!queryString"
                                       class="form-control search-query" placeholder="名称查询">
                                <span class="input-group-btn">
                                    <button type="button" onclick="doQuery(1)"
                                            class="btn btn-primary btn-sm">
                                        <span class="ace-icon fa fa-search icon-on-right bigger-110"></span>
                                        查询
                                    </button>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6">
                    <a href="#modal-category" role="button" class="btn btn-sm btn-success"
                       onclick="$('#submitForm').clearForm();validator.resetForm();" href="#modal-category" data-toggle="modal">
                        <i class="ace-icon fa fa-pencil-square-o bigger-120 "></i>添加广告
                    </a>
                </div>
            </div>
        </div>
        <!-- /.page-header -->

        <div class="row">
            <div class="col-xs-12">
                <table class="table table-striped table-bordered table-hover">
                    <thead>
                    <tr>
                        <th>标题</th>
                        <th>位置</th>
                        <th>链接地址</th>
                        <th>开始时间</th>
                        <th>结束时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="user_list"></tbody>
                </table>
            </div>
            <!-- /.span -->
        </div>
        <div id="biuuu_city" style="margin: 5px;text-align: center"></div>
    </form>
    <!-- /.row -->
</div>
<!-- /.page-content -->
<div id="modal-category" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header no-padding">
                <div class="table-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        <span class="white">×</span>
                    </button>
                    广告信息
                </div>
            </div>
            <form class="form-horizontal" method="post" role="form" id="submitForm" action="./banner/save" enctype="multipart/form-data" novalidate="novalidate">
                <input type="hidden" name="bannerId" id="bannerId" value="0">

                <div class="modal-body no-padding">
                    <div class="space-4"></div>

                    <div class="form-group">
                        <label class="col-sm-2 col-xs-12 control-label no-padding-right"> 广告位 </label>
                        <div class="col-sm-9  col-xs-12 ">
                            <select name="bannerLoc" class="form-control" id="bannerLoc">
                                <option value="">选择广告位置</option>
                                <option value="1">首页顶部Banner广告</option>
                                <option value="2">中部广告</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 col-xs-12 control-label no-padding-right"> 广告标题 </label>
                        <div class="col-sm-9  col-xs-12 ">
                            <input type="text" id="bannerTitle" name="bannerTitle" placeholder="请输入广告标题..." class="col-xs-10">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 col-xs-12 control-label no-padding-right"> 广告描述 </label>
                        <div class="col-sm-9  col-xs-12 ">
                            <textarea class="form-control" id="bannerDesc" name="bannerDesc" rows="4" placeholder="请输入广告描述"></textarea>
                        </div>
                    </div>
                    <div class="space-4"></div>
                    <div class="form-group">
                        <label class="col-sm-2 col-xs-12 control-label no-padding-right"> 广告地址 </label>
                        <div class="col-sm-9  col-xs-12 ">
                            <input type="text" id="bannerTarget" name="bannerTarget" placeholder="请输入主播ID或项目ID或外网链接地址..." class="col-xs-10">
                        </div>
                    </div>
                    <div class="space-4"></div>
                    <div class="form-group">
                        <label class="col-sm-2  col-xs-12  control-label no-padding-right">
                            有效时间 </label>
                        <div class="col-sm-9 col-xs-12 ">
                                            <span class="input-icon">
                                                <input type="text" id="bannerStarttime" value="" name="bannerStarttime" placeholder="开始时间">
                                                <i class="ace-icon fa fa-clock-o green"></i>
                                            </span>
                            <span>~</span>
                                            <span class="input-icon">
                                                <input type="text" id="bannerEndtime" value="" name="bannerEndtime" placeholder="结束时间">
                                                <i class="ace-icon fa fa-clock-o green"></i>
                                            </span>
                            <span id="dateError">&nbsp;</span>

                        </div>
                    </div>
                    <div class="space-4"></div>
                    <div class="form-group">
                        <label class="col-sm-2 col-xs-12 control-label no-padding-right"> 广告图片 </label>

                        <div class="col-sm-8  col-xs-12 ">
                            <label class="ace-file-input ace-file-multiple">
                                <input type="file" name="bannerFile" id="bannerFile">
                            </label>
                            <span class="help-block">
                                    建议长宽度在1200像素以上,宽高4:1，仅支持jpg、png格式，文件小于2M
                                    </span>
                        </div>
                    </div>

                    <div class="space-4"></div>
                </div>

                <div class="modal-footer no-margin-top text-right">
                    <button class="btn btn-sm btn-success " type="submit">
                        <i class="ace-icon fa fa-check"></i>
                        提交
                    </button>
                    <!--&nbsp;&nbsp;-->
                    <!--<button class="btn btn-sm btn-default " data-dismiss="modal">-->
                    <!--<i class="ace-icon fa fa-times"></i>-->
                    <!--关闭-->
                    <!--</button>-->
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!--<script type="text/javascript" src="$request.contextPath/res/assets/js/ace/elements.fileinput.js"></script>-->
<script src="$request.contextPath/res/framework/datetimepicker/jquery.datetimepicker.js"></script>
<script type="text/javascript">
    var submitLock = false;
    var validator;
    //    var productId = '$productId';

    var options = {
        beforeSerialize:function() {
            if($('#bannerFile').val() == '') {
                $('#bannerFile').remove();
            }
        },
        beforeSubmit: function () {
            if (submitLock) {
                return false;
            }
            info('正在保存，请稍等...');
            submitLock = true;
            return true;
        },
        success: function (data) {
            submitLock = false;
            if (data.resultCode == 0) {
                succ('操作成功');
                $('#modal-category').modal('toggle');

                delay(function () {
                    //$('#modal-category').modal('hide');
                    load('./banner/list');
                }, 1000);
            } else {
                error(data.resultMsg);
            }
        },
        error: function (data) {
            submitLock = false;
            error('系统繁忙，请稍候重试');
        },
        dataType: 'json',
        type: 'POST',
        timeout: 50000
    };
    $(function () {
        validator = $("#submitForm").validate({
            errorElement: "em",
            errorPlacement: function (error, element) {
                element.after(error);
            },
            rules: {
                "bannerTitle": {
                    required: true
                },
                "bannerLoc": {
                    required: true
                },
                "bannerTarget": {
                    required: true
                }
            },
            messages: {
                "bannerTitle": {
                    required: '请输入广告标题'
                },
                "bannerLoc": {
                    required: '请选择广告位置'
                },
                "bannerTarget": {
                    required: '请输入广告目标'
                }
            },
            submitHandler: function (form) {
                if (submitLock) {
                    return;
                }
                $(form).ajaxSubmit(options);
            }
        });

        jQuery('#bannerStarttime').datetimepicker({
            lang: 'ch',
            format: 'Y-m-d H:i:00',
            step: 1
        });
        jQuery('#bannerEndtime').datetimepicker({
            lang: 'ch',
            format: 'Y-m-d H:i:00',
            step: 1
        });
    });

    $('#bannerFile').ace_file_input({
        style: 'well',
        btn_choose: '选择广告图',
        btn_change: null,
        no_icon: 'ace-icon fa fa-picture-o',
        thumbnail: 'large',
        droppable: true,
        allowExt: ['jpg', 'jpeg', 'png', 'gif'],
        allowMime: ['image/jpg', 'image/jpeg', 'image/png', 'image/gif']
    });

    function showEditDialog(bannerId) {
        validator.resetForm();
        $('#submitForm').clearForm();
        $('#submitForm').find('#bannerId').val(bannerId);
        if(bannerId > 0) {
            $.ajax(
                    {
                        type: "POST",
                        url: './banner/queryById', data: {bannerId: bannerId},
                        success: function (data) {
                            $.each(data, function (i, item) {
                                if (i == 'bannerStarttime') {
                                    $('#submitForm').find('#' + i).val(item);
                                } else if (i == 'bannerEndtime') {
                                    $('#submitForm').find('#' + i).val(item);
                                } else if (i == 'bannerImg') {
                                    $('#bannerFile').ace_file_input('show_file_list', [{type: 'image', name: item}]);
                                    $('#bannerFile').parent().find('img').css({width: '300px', height: '150px'}).show();
                                } else {
                                    $('#submitForm').find('#' + i).val(item);
                                }
                            });
                        },
                        dataType: 'JSON'
                    });
        }
        $('#modal-category').modal('show');
    }

    $(document).ready(function() {
        getPageData(1);
    });

    function doQuery() {
        getPageData(1);
    }

    function getPageData(curr){
        var brands;
        $.ajax({
            url: "./banner/getBanner",
            type: "POST",
            dataType: 'json',
            data: {
                "pgNum" : curr,
                "pgSize" : 12,
                "type" : 0,
                "query" : $("#queryString").val()
            },

            success: function (data) {
                brands = data["list"];
                //console.log(data.list);
                //调用分页
                laypage({
                    cont: 'biuuu_city',
                    pages: data['pages'],
                    curr: curr, //当前页
                    jump: function(obj, first){ //触发分页后的回调
                        if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
                            getPageData(obj.curr);
                        }
                    }
                })

                var str = "";
                for(var i in brands){
                    var kys = brands[i];
                    str += "<tr>";
                    str += "<td>" + "<a href=\"javascript:void(0)\"  onclick=\"showEditDialog('"+kys['bannerId']+"')\"</a>"+kys['bannerTitle'] + "</td>";
                    var locdes = "中部广告";
                    if (kys['bannerLoc'] == 1) {
                        locdes = "顶部Banner";
                    }
                    str += "<td>" + locdes + "</td>";
                    str += "<td >" + kys['bannerTarget'] + "</td>";
                    str += "<td >" + kys['bannerStarttime'] + "</td>";
                    str += "<td >" + kys['bannerEndtime'] + "</td>";
                    str += "<td >"
                    str += "<div class=\"action-buttons\">"
                            +"<a class=\"green\" href=\"#\""
                            +" onclick=\"showEditDialog('"+kys['bannerId'] +"')\" "
                            +"title=\"编辑\""
                            +"hideFocus=\"true\">"
                            +"<i class=\"ace-icon fa fa-pencil bigger-130\" hideFocus=\"true\"></i>"
                            +"</a>";

                    str += "<a class=\"red\" href=\"javascrip:void(0)\" onclick=\"deleteBanner("+kys['bannerId']+")\""
                            +"title=\"删除\">"
                            +"<i class=\"ace-icon fa fa-trash-o bigger-130\"></i>"
                            +"</a>"
                            +"</div>";

                    str += "</td>";
                    str += "</tr>";
                }
                //console.log(str);
                $("#user_list").html(str);
            },
            error:function(data){
                layer.msg('获取记录失败！', {icon: 5});
            }
        });
    }

    function deleteBanner(Id) {
        confirm('确认删除?', function () {
            $.ajax({
                type: "GET",
                url: './banner/del',
                data: {bannerId: Id},
                success: function (data) {
                    if (data.resultCode == 0) {
                        succ('删除成功！');
                        getPageData(1);
                    } else {
                        error(data.resultMsg);
                    }
                },
                dataType: 'JSON'
            });
        });
    }
</script>